<template>
  <div class="business-file-list-image" v-if="fileList && fileList.length > 0" @click="handlePreviewItemClick">
    <img :src="previewFilePath" alt="" id="preview-img" v-if="previewFilePath"/>
  </div>
</template>

<script setup>
import {getTsVideoFirstFrame, getVideoFirstFrame, isTsVideo, isVideo} from "@/utils/file.js";
//列表
let props = defineProps({
  //文件列表
  fileList: {
    type: Array,
    required: true,
    default: () => []
  },
  //图片样式
  imageStyle: {
    type: Object,
    required: false,
    default: () => {
      return {
        width: '80px'
      }
    }
  },
  //占位字体
  placeholder: {
    type: String,
    required: false,
    default: ''
  }
});
let previewFilePath = ref(null);
let cur = ref({});
let dialogShow = ref(false);


watch(() => props.fileList, async newVal => {
  if (newVal && newVal.length > 0) {
    cur.value = newVal[0];
    let path = import.meta.env.VITE_APP_BASE_API + cur.value.filePath;
    if (isVideo(cur.value.originFileName || cur.value.fileName)) {
      path = await getVideoFirstFrame(path);
    } else if (isTsVideo(cur.value.originFileName || cur.value.fileName)) {
      path = await getTsVideoFirstFrame(import.meta.env.VITE_APP_BASE_API + cur.value.filePath);
    }
    previewFilePath.value = path;
  }
}, {immediate: true});

function handlePreviewItemClick() {
  window.open(import.meta.env.VITE_APP_BASE_API + cur.value.filePath);
}
</script>

<style lang="scss" scoped>
#preview-img {
  width: 80px;
  object-fit: cover;
}
</style>